<template>
  <div class="ht-login">
    <div class="loginbody">
      <el-card header="登录" class="login-box">
        <el-form :model="login_form" label-position="right">
          <el-form-item>
            <el-input
              v-model="login_form.username"
              placeholder="请输入用户名"
              prefix-icon="el-icon-user-solid"
              @keydown.enter.native="keypress"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="login_form.password"
              type="password"
              placeholder="请输入密码"
              @keydown.enter.native="keypress"
              prefix-icon="icon-password"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="login"
              :loading="login_form_loading"
              icon="icon-signin"
              style="width: 100%;"
              class="ht-form-sign-button"
              round
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="footer">{{ footer_msg }}</div>
  </div>
</template>

<script>
import sys_config from "@/plugins/config";
import { storeExtend } from "../../store";

export default {
  data() {
    return {
      footer_msg: sys_config.footer_msg,
      login_form: {},
      login_form_loading: false
    };
  },
  methods: {
    login() {
      this.login_form_loading = true;
      if (
        this.$_.isEmpty(this.login_form.username) ||
        this.$_.isEmpty(this.login_form.password)
      ) {
        this.$message.warning("请先填写用户名和密码");
        this.login_form_loading = false;
        return;
      }
      this.login_form_loading = true;
      this.$http
        .post("/login/login", {
          username: this.login_form.username,
          password: this.login_form.password
        })
        .then(res => {
          this.login_form_loading = false;
          if (res.data.errorCode == "SUCCESS") {
            this.$signCookie(res.data.returnData.authorization);
            storeExtend.commit.commitLoginUser(res.data.returnData.user);
            if (this.$_.isEmpty(this.$route.params.redirect_uri)) {
              this.$router.replace("/");
            } else {
              this.$router.replace(this.$route.params.redirect_uri);
            }

            return;
          }
          this.$message.warning(res.data.errorMessage);
        })
        .catch(res => {
          this.login_form_loading = false;
          console.log(res);
          this.$message.error("登录出错");
        });
    },
    keypress(e) {
      this.login();
    }
  },
  created() {
    if (this.$islogin()) {
      var redirctUri = this.$route.params?.redirect_uri;
      if (redirctUri == null) redirctUri = "/";
      this.$router.replace({
        path: redirctUri
      });
      return;
    }
  }
};
</script>

<style lang="scss" scoped>
.ht-login {
  background-image: repeating-linear-gradient(
    to bottom,
    #37395a 0.09259rem,
    #27241d,
    #27241e
  );

  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  display: inline-block;

  .footer {
    background: transparent;
    border: none;
    color: #ffffff;
    text-align: center;
  }
  .loginbody {
    display: flex;
    height: calc(100% - 30px);
    width: 100%;
    align-items: center;
    justify-content: center;

    .login-box {
      width: 500px;
      height: 280px;
      box-shadow: 0px 0px 1px 1px #ffffff;
    }
  }
}
</style>
